<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1 class="main-heading" rtl>
        {{ 'anms.examples.elements.title' | translate }}
      </h1>
    </div>
  </div>
  <div class="row" [ngClass]="routeAnimationsElements" rtl>
    <div class="col-md-12 col-lg-6">
      <ng-template #error>Loading of element failed...</ng-template>
      <ng-template #loading>Loading...</ng-template>
      <mwc-button raised
                  *axLazyElement="'https://unpkg.com/@material/mwc-button@0.6.0/mwc-button.js?module'; loadingTemplate: loading; errorTemplate: error; module: true"
                  (click)="increment()">
        Increment
      </mwc-button>
      <br>
      <br>
      <p>{{ 'anms.examples.elements.counter' | translate }}: {{counter}}</p>
    </div>
    <div class="col-md-12 col-lg-6" [ngClass]="routeAnimationsElements">
      <p>
        {{ 'anms.examples.elements.text1' | translate }}
        <code>https://unpkg.com/@material/mwc-button@0.6.0/mwc-button.js?module</code>
        {{ 'anms.examples.elements.text2' | translate }}
      </p>
      <p>
        {{ 'anms.examples.elements.text3' | translate }}
        <code>*axLazyElement</code>
        {{ 'anms.examples.elements.text4' | translate }}
        <code>@angular-extensions/elements</code>
        {{ 'anms.examples.elements.text5' | translate }}.
      </p>
      <p>
        {{ 'anms.examples.elements.text6' | translate }}
        <a href="https://github.com/angular-extensions/elements" rel="noopener noreferrer" target="_blank">{{
          'anms.examples.elements.text5' | translate
          }}</a>,
        <a href="https://angular-extensions.github.io/elements/#/docs/use-cases" rel="noopener noreferrer" target="_blank">{{
          'anms.examples.elements.text7' | translate
          }}</a>
        {{ 'anms.examples.elements.text8' | translate }}
        {{ 'anms.examples.elements.text9' | translate }}
        <a href="https://angular-extensions.github.io/elements/#/examples" rel="noopener noreferrer" target="_blank">{{
          'anms.examples.elements.text10' | translate
          }}</a>

        {{ 'anms.examples.elements.text11' | translate }}
        <a href="https://angular-extensions.github.io/elements/#/docs" rel="noopener noreferrer" target="_blank">{{
          'anms.examples.elements.text12' | translate
          }}</a>...
      </p>
    </div>
  </div>
</div>
